<script setup lang="ts">
import Button from '@/components/Button/Button.vue'


// wfIcon
import Icon from './components/Icon/Icon.vue';

import {onMounted, ref} from 'vue'



// mycollapse
import MyColla from './components/MyColla/MyColla.vue';
import MyCollaItem from './components/MyColla/MyCollaItem.vue';

// tooltip
import Tooltip from './components/Tooltip/Tooltip.vue';
import type{ TooltipInstance } from './components/Tooltip/type';

// input
import Input from './components/Input/Input.vue';

// Dropdown
import Dropdown from './components/Dropdown/Dropdown.vue'; 

// vnode
import VNode from './components/VirtualNode/VNode'; 
//Message
import Message from './components/Message/Message.vue';
import { createMessage,getLastMessageInstance } from './components/Message/method';
// import NodeTsx from './components/VirtualNode/VNodeTsx'; 

// Switch
import Switch from './components/Switch/Switch.vue';


// Select
import remote from './components/Select/remote.vue';

const test = ref(false)
const buttonRef = ref()



onMounted(()=>{
  console.log('获取到原生的按钮',buttonRef.value.button)
  createMessage({ showClose:true,message:'hello world111!',duration:0})
  console.log('last_Message:',getLastMessageInstance())

  const instance = createMessage({ showClose:true,message:'comeon world222!',duration:2000})
  console.log('last_Message:',getLastMessageInstance())
  
  createMessage({ showClose:false,message:'deadman world333!',duration:0})
  console.log('last_Message:',getLastMessageInstance())

  // 两秒后销毁
  // setTimeout(()=>{
  //   instance.manualDelete()
  // },2000)
})

</script>

<script lang="ts">
import  { defineComponent } from 'vue';
import type { IdType } from './components/MyColla/types';
import type { Options } from '@popperjs/core';

// 给组件起名字
export default defineComponent({
  name:'VwButton'
})


// collapse 的初始数据
const openValue2 = ref<IdType[]>(['1','2'])

const size = ref<any>('4x')

// setTimeout(() => {
//   size.value = '3x'
// }, 3000);

// toolt 测试
const tooltip = ref<TooltipInstance>()

const open = ()=>{
  tooltip.value?.show()
}
const close = ()=>{
  tooltip.value?.hide()
}
// tooltips
const options : Partial<Options> ={strategy:"fixed"}

// Dropdown 
const menuOption = [
  {key:1,label:'item1'},
  {key:2,label:'item2',disabled:true},
  {key:3,label:'item3'},
  {key:4,label:'item4',disabled:true},
]
</script>

<template>
  <div>
    <!-- 控制 tooltip 的 按钮 -->
    <Button ref="buttonRef" type="danger" plain  @click="open"> open Button</Button>
    <Button ref="buttonRef" type="danger" plain  @click="close">close Button</Button>

    <!-- Button 组件 -->
    <hr>
    <h1>Button :</h1>
    <h2> <em>无主题的按钮</em> </h2>
    <div> 各个形状 的 无主题版 </div>
    <br/>
    <Button> default </Button>
    <Button plain> plain </Button>
    <Button round> round </Button>
    <Button circle> circle </Button>
    <Button disabled> disabled </Button>
    <br/><br/>
    <hr>
    <h2> <em>有主题的按钮</em> </h2>
    <div style="margin-bottom: 10px;"> 默认版 default </div>
    <Button type="primary"> primary </Button>
    <Button type="success"> success </Button>
    <Button type="info"> info </Button>
    <Button type="warning"> warning </Button>
    <Button type="danger"> danger </Button>
    <br/><br/>
    <div style="margin-bottom: 10px;"> 普通版 plain </div>
    <Button type="primary" plain> primary </Button>
    <Button type="success" plain> success </Button>
    <Button type="info"    plain> info </Button>
    <Button type="warning" plain> warning </Button>
    <Button type="danger"  plain> danger </Button>
    <br/><br/>
    <div style="margin-bottom: 10px;"> 胶囊版 round </div>
    <Button type="primary" round> primary </Button>
    <Button type="success" round> success </Button>
    <Button type="info"    round> info </Button>
    <Button type="warning" round> warning </Button>
    <Button type="danger"  round> danger </Button>
    <br/><br/>
    <div style="margin-bottom: 10px;"> 圆形版 circle </div>
    <Button type="primary" circle> primary </Button>
    <Button type="success" circle> success </Button>
    <Button type="info"    circle> info </Button>
    <Button type="warning" circle> warning </Button>
    <Button type="danger"  circle> danger </Button>
    <br/><br/>
    <div style="margin-bottom: 10px;"> 禁用版 disable </div>
    <Button type="primary" disabled> primary </Button>
    <Button type="success" disabled> success </Button>
    <Button type="info"    disabled> info </Button>
    <Button type="warning" disabled> warning </Button>
    <Button type="danger"  disabled> danger </Button>
    <br/><br/>
    <div style="margin-bottom: 10px;"> 按钮大小 </div>
    <Button size="large" type="primary" plain> large </Button>
    <Button size="small" type="primary" plain> small </Button>
    <Button size="large" type="success" round> large </Button>
    <Button size="small" type="success" round> small </Button>
    <Button size="large" type="warning" circle> large </Button>
    <Button size="small" type="warning" circle> small </Button>
    <br/><br/>
    <Button size="large" type="warning" plain loading> loading </Button>
    <Button size="large" type="warning" plain icon="arrow-up"> icon </Button>
    <hr>


    

    <!-- Icon 组件 -->
     <h1>
       图标组件
     </h1>
    <Icon :icon="'user-secret'" spin :size="size" type="primary" ></Icon>
    <!-- collapse -->
    <h1> 折叠框组件 </h1>
    <MyColla v-model="openValue2" accordion>
      <MyCollaItem id="1" title="第一个Item的标题" :isdisabled="false">
        啦啦啦啦啦啦啦啦！
      </MyCollaItem>
      <MyCollaItem id="2" title="第2个Item的标题" :isdisabled="false">
        耶耶耶耶耶耶耶耶！
      </MyCollaItem>
      <MyCollaItem id="a" title="第3个Item的标题" isdisabled>
        噢噢噢噢噢噢噢噢！
      </MyCollaItem>
      <MyCollaItem id="t" title="第4个Item的标题" isdisabled>
        嘿嘿嘿嘿嘿嘿嘿嘿！
      </MyCollaItem>
    </MyColla>
    <br/><hr>

    <!-- Tooltips组件 -->
     <h1> Tooltips 组件 </h1>
    <Tooltip ref="tooltip" :manual="false"  :popperOptions="options">
      <img src="./asses/4.jpg" alt="博尔特" style="width: 120px; height: 120px;">
      <template #content>
        <h1>我爱运动</h1>
      </template>
    </Tooltip>

    <VNode msg="123"></VNode>
    <!-- <NodeTsx message="123456"></NodeTsx> -->
    <Dropdown :menu-options="menuOption">我是下拉框</Dropdown>
    <Input type="text" modelValue="我是Input" :showPassword="true" clearable/>
    <Input type="text" modelValue="爬山看风景" :showPassword="false"/>
    <Switch v-model="test"></Switch>
    <!-- Select -->
    <remote></remote>
    
  </div>
</template>

<style scoped>
</style>